<script lang="ts" setup>
import { getCollectArticle, userFollowDoctorSelect } from '@/api/home'

const currentTab = ref('收藏')
const currentTextTab = ref('全部')

const options = [
  {
    label: '收藏',
    value: '收藏',
  },
  {
    label: '关注',
    value: '关注',
  },
]
const value = ref('收藏')
const routePath = [{ name: '首页', path: '/' }, { name: '我的收藏' }]
const loadStatus = ref<'loading' | 'loaded'>('loading')
const favTypes = ref<any[]>([])
function getFavTypes() {
  // 查找收藏的类型
  const req = {
    group: [
      {
        colName: 'classify',
        type: 'by',
      },
    ],
  }
  getCollectArticle(req).then((res) => {
    const arr = ['专家库', '头条资讯', '健康陕西', '百姓健康系列栏目', '健康知识', '科普资料', '宣传活动']
    const types = [...new Set(res.data.map(item => item.classify.split('/')[0]))]
    favTypes.value.push('全部')
    if (types.length) {
      arr.forEach((type) => {
        if (types.includes(type)) {
          favTypes.value.push(type)
        }
      })
    }
  })
}
const favList = ref<any[]>([])
const favPage = ref<any>({
  pageNo: 1,
  rownumber: 10,
  total: 0,
})
function getFavList() {
  // 查找收藏的文章
  const req = {
    page: {
      pageNo: favPage.value.pageNo,
      rownumber: favPage.value.rownumber,

    },
  }
  if (currentTextTab.value !== '全部') {
    req.condition = [
      {
        colName: 'classify',
        ruleType: 'like]',
        value: currentTextTab.value,
      },
    ]
  }
  loadStatus.value = 'loading'
  getCollectArticle(req).then((res) => {
    console.log(res)
    loadStatus.value = 'loaded'
    favList.value = res.data
    favPage.value = res.page
  })
}
const expertList = ref<any[]>([])
const expertPage = ref<any>({
  pageNo: 1,
  rownumber: 10,
  total: 0,
})
function getFavExpert() {
  // 查找关注的专家
  loadStatus.value = 'loading'
  userFollowDoctorSelect().then((res) => {
    console.log(res)
    loadStatus.value = 'loaded'
    expertList.value = res.data
    expertPage.value = res.page
  })
}
function tabClick(e) {
  currentTab.value = e

  if (e === '收藏') {
    favPage.value.pageNo = 1
    getFavList()
  }
  else {
    expertPage.value.pageNo = 1
    getFavExpert()
  }
}

function textTabClick(e) {
  currentTextTab.value = e
  favPage.value.pageNo = 1
  getFavList()
}
function onFavPageChange(params: { pageNum: number, pageSize: number }) {
  favPage.value.pageNo = params.pageNum
  favPage.value.rownumber = params.pageSize
  getFavList()
}
function onExpertPageChange(params: { pageNum: number, pageSize: number }) {
  expertPage.value.pageNo = params.pageNum
  expertPage.value.rownumber = params.pageSize
  getFavExpert()
}

function toDetail(item) {
  if (currentTab.value === '收藏') {

  }
  else {
    navigateTo({
      path: `/peopleHealth/ExpertListDetail`,
      query: {
        id: item.data_id,
      },
    })
  }
}
function getDetailUrl(item) {
  const type = item.classify?.split('/')?.[0]
  const res = {
    path: '',
    query: { id: item.data_id },
  }
  switch (type) {
    case '头条资讯':
      res.path = `/peopleHealth/topNewsDetail`
      break
    case '健康陕西':
      res.path = `/peopleHealth/healthyShaanxiDetail`
      // navigateTo({
      //   path: `/peopleHealth/healthyShaanxiDetail`,
      //   query: {
      //     id: item.data_id,
      //   },
      // })
      break
    case '百姓健康系列栏目':
      if (item.classify.includes('广播栏目')) {
        res.query.type = '广播栏目'
      }
      else if (item.classify.includes('《三秦百姓健康》杂志')) {
        res.query.type = '《三秦百姓健康》杂志'
      }
      else if (item.classify.includes('《陕西日报》专版')) {
        res.query.type = '《陕西日报》专版'
      }
      else if (item.classify.includes('《陕西老年健康报》专版')) {
        res.query.type = '《陕西老年健康报》专版'
      }
      else if (item.classify.includes('电视栏目')) {
        res.query.type = '电视栏目'
      }
      res.query.uid = item.uid
      res.path = `/peopleHealth/peopleHealthSeriesDetail/${item.data_id}`
      break
    case '健康知识':
      res.path = `/peopleHealth/knowledgeDetail/${item.data_id}&1`
      break
    case '科普资料':
      if (item.classify.includes('科普资源')) {
        res.path = `/peopleHealth/popularizationDetail/${item.data_id}&科普资源`
      }
      else if (item.classify.includes('获奖作品')) {
        res.path = `/peopleHealth/popularizationDetail/${item.data_id}&获奖作品`
      }
      else if (item.classify.includes('专家作品')) {
        res.path = `/peopleHealth/popularizationDetail/${item.data_id}&专家作品`
      }
      break
    case '宣传活动':
      if (item.classify.includes('社区活动')) {
        res.path = `/peopleHealth/HealthActivityDetail/${item.data_id}&社区活动`
      }
      else if (item.classify.includes('论坛讲座')) {
        res.path = `/peopleHealth/HealthActivityDetail/${item.data_id}&论坛讲座`
      }
      else if (item.classify.includes('在线直播')) {
        res.path = `/peopleHealth/HealthActivityDetail/${item.data_id}&在线直播`
      }
      else if (item.classify.includes('卫生宣传日')) {
        res.path = `/peopleHealth/HealthActivityDetail/${item.data_id}&卫生宣传日`
      }
      else if (item.classify.includes('知汛防汛')) {
        res.path = `/peopleHealth/HealthActivityDetail/${item.data_id}&知汛防汛`
      }
      break
    case '中医健康科普':
    case '中医科普资料':
      res.path = `/peopleHealth/outKnowledgeDetail/${item.data_id}&中医健康科普详情`
      break
    default:
      console.log(item.classify)

      break
  }
  return res
}
onMounted(() => {
  getFavTypes()
  getFavList()
  getFavExpert()
})
</script>

<template>
  <div class="p-80px">
    <CommonPageContainer
      title="我的收藏" :path="routePath"
    >
      <div class="main-content-view">
        <div class="center-content-view">
          <div class="article-view">
            <div class="custom-style">
              <el-segmented v-model="value" :options="options" @change="tabClick" />
            </div>
            <template v-if="currentTab === '收藏'">
              <div class="collection-view">
                <div class="text-tab-view w-full overflow-hidden">
                  <!-- <div
                    v-for="item in favTypes" class="text-tab-item" :class="currentTextTab === item ? 'text-tab-item-selected' : ''"
                    @click="textTabClick(item)"
                  >
                    {{ item }}
                  </div> -->
                  <el-tabs class="w-full" :model-value="currentTextTab" @tab-change="textTabClick">
                    <el-tab-pane v-for="item in favTypes" :key="item" :label="item" :name="item">
                      <!-- {{ item }} -->
                    </el-tab-pane>
                  </el-tabs>
                </div>
                <div class="collection-list">
                  <NuxtLink v-for="item in favList" :key="item.id" class="collection-item" :to="getDetailUrl(item)">
                    <el-image :src="getImgUrl(item.cover_file_name)" class="image" />
                    <div class="title-view w-full truncate">
                      {{ item.title_name }}
                    </div>
                    <div class="date-view">
                      <div class="view-text-view">
                        <div class="eye-icon" />
                        <!-- <div class="view-text">
                          23
                        </div> -->
                      </div>
                      <div class="date-text">
                        {{ $dayjs(item.create_time).format("YYYY-MM-DD") }}
                      </div>
                    </div>
                  </NuxtLink>
                </div>
                <div v-if="!favList.length && loadStatus === 'loaded'" class="min-h-300px w-full flex items-center justify-center">
                  <el-empty />
                </div>
                <PublicPagination
                  v-if="favPage.total"
                  :page-size="favPage.rownumber" :page-num="favPage.pageNo" :total="favPage.total"
                  @change="onFavPageChange"
                />
              </div>
            </template>
            <template v-else>
              <div class="follow-view">
                <div class="follow-grid-view">
                  <NuxtLink v-for="item in expertList" :key="item.id" class="follow-grid-item" target="_blank" :to="{ path: '/peopleHealth/ExpertListDetail', query: { id: item.data_id } }">
                    <el-image :src="getImgUrl(item.personal_img)" class="image" />
                    <div class="name-row">
                      <div class="name-left">
                        {{ item.name }}
                      </div>
                      <div class="name-right">
                        {{ item.position }}
                      </div>
                    </div>
                    <div class="pos-view">
                      {{ item.organ_name }}
                    </div>
                  </NuxtLink>
                </div>
                <PublicPagination
                  :page-size="expertPage.rownumber" :page-num="expertPage.pageNo" :total="expertPage.total"
                  @change="onExpertPageChange"
                />
              </div>
            </template>
          </div>
        </div>
      </div>
    </CommonPageContainer>
  </div>
</template>

<style scoped lang="scss">
.custom-style .el-segmented {
  // --el-segmented-item-selected-color: var(--el-text-color-primary);
  // --el-segmented-item-selected-bg-color: #ffd100;
  --el-border-radius-base: 16px;
  min-width: 180px;
}
.main-content-view {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  // background: #f7f7f7;
  // box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.16);

  .center-content-view {
    // width: 1200px;
    width: 100%;
    // background: white;
    // margin-top: 50px;
    position: relative;
    // box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.16);
    border-radius: 8px;
    // padding: 50px;
    box-sizing: border-box;
    margin-bottom: 50px;

    .back-view {
      position: absolute;
      left: -120px;
      top: 0;
      width: 80px;
      height: 40px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 16px;
      color: #999999;
      cursor: pointer;
      user-select: none;
    }
  }

  .article-view {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;

    .avatar-view {
      width: 62px;
      height: 62px;
      border-radius: 50%;
    }

    .button-tab-view {
      display: flex;
      margin-top: 50px;
      gap: 50px;

      .button-tab-item {
        width: 116px;
        height: 32px;
        background: #f7f7f7;
        border-radius: 4px;
        color: #999999;
        font-size: 16px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: bold;
        cursor: pointer;
      }

      .button-tab-item-selected {
        background: #27a280;
        color: #ffffff;
      }
    }
  }
}

.collection-view {
  width: 100%;
  display: flex;
  flex-direction: column;
  margin-top: 64px;

  .text-tab-view {
    display: flex;
    gap: 50px;

    .text-tab-item {
      font-size: 16px;
      color: #999999;
      font-weight: bold;
      cursor: pointer;
      padding-bottom: 13px;
    }

    .text-tab-item-selected {
      color: #27a280;
      border-bottom: solid 4px #27a280;
    }
  }

  .collection-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, 200px);
    flex-wrap: wrap;
    margin-top: 50px;
    grid-column-gap: 20px;
    grid-row-gap: 50px;

    .collection-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      cursor: pointer;
      max-width: 230px;
      .image {
        width: 180px;
        height: 271px;
      }

      .title-view {
        font-size: 14px;
        color: #666666;
        font-weight: bold;
        margin-top: 24px;
      }

      .date-view {
        width: 180px;
        display: flex;
        margin-top: 16px;
        font-size: 14px;
        color: #666666;
        align-items: center;
        justify-content: space-between;

        .view-text-view {
          display: flex;
          align-items: center;

          .eye-icon {
            width: 14px;
            height: 10px;
            background: url('/static/img/eye_icon_img.png') no-repeat;
          }

          .view-text {
            margin-left: 5px;
          }
        }

        .date-text {
        }
      }
    }
  }
}

.follow-view {
  width: 100%;
  display: flex;
  flex-direction: column;
  margin-top: 50px;

  .follow-grid-view {
    width: 100%;

    display: grid;
    grid-template-columns: repeat(auto-fit, 200px);
    grid-column-gap: 60px;
    grid-row-gap: 50px;
    padding: 10px;
    .follow-grid-item {
      width: 230px;
      height: 257px;
      box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.16);
      display: flex;
      flex-direction: column;
      align-items: center;

      .image {
        width: 124px;
        height: 124px;
        border-radius: 50%;
        margin-top: 30px;
      }

      .name-row {
        display: flex;
        align-items: center;
        margin-top: 24px;
        font-weight: bold;
        gap: 10px;

        .name-left {
          color: #333333;
          font-size: 16px;
        }

        .name-right {
          color: white;
          background: #76c9b3;
          border-radius: 4px;
          font-size: 14px;
          padding: 5px;
        }
      }

      .pos-view {
        margin-top: 17px;
        color: #666666;
        font-size: 14px;
      }
    }
  }
}
</style>
